<template lang="html">
  <div class="articleDetail">
    <div class="summary_wrap">
      <p class="summary">{{summary}}</p>
      <div class="summary_info">
        <div class="source">
          {{content.author}}
        </div>
        <div class="viewnum">
          <!-- <i class="iconfont icon-wujiaoxing"></i> -->
          <img src="../../assets/images/icon_fm_chakanliang@2x.png" alt="" class="icon browse">
          <span>{{browseInfo.browse}}</span>
        </div>
        <div class="time">
          {{ content.otime | fromNow }}
        </div>
      </div>
    </div>

    <div class="content">
      <div class="" v-html="content.content" v-if="contentLoaded"></div>
      <spinner
        size="10"
        color="#26a8ff"
        margin="10px"
        v-else
      />
    </div>
    <div class="footer">
      <div class="share" @click="shareArticle">
        <!-- <i class="iconfont icon-share blue"></i> -->
        <img src="../../assets/images/icon_fm_share@2x.png" class="icon">
        <span>分享</span>
        <span>{{browseInfo.share}}</span>
      </div>
      <div class="collect" @click="saveArticle">
        <!-- <i class="iconfont icon-wujiaoxing blue"></i> -->
        <img src="../../assets/images/icon_fm_sc_pre@2x.png" alt="" class="icon" v-if="hasCollect">
        <img src="../../assets/images/icon_fm_sc@2x.png" alt="" class="icon" v-else>
        <span>收藏</span>
        <span>{{browseInfo.store}}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Spinner from '../Spinner.vue'
import { getArticleContent, ArticleContent, callStockAlive, storeArticle, shareArticle, share, saveArticle, checkIfCollectArticle, deleteArticle, callNativeLogin } from '../../api'
import { fromNow } from '../../util/timeUtil'
import { getUserCode, hasLogin } from '../../util/storageUtil'
import { eventTrack } from '../../util/decorator'

interface detailData {
  content: ArticleContent | any;
  contentLoaded: boolean;
  // hasCollect: boolean;
}
export default Vue.extend({
  props: {
    summary: {
      type: String,
      default: '--'
    },
    contentUrl: {
      type: String,
      required: true
    },
    browseInfo: Object,
    hasCollect: {
      type: Boolean
    }
  },
  components: {
    Spinner
  },
  data () {
    const detailData: detailData = {
      content: { },
      contentLoaded: false
      // hasCollect: false
    }
    return detailData
  },
  mounted () {
    getArticleContent(this.contentUrl).then(res => {
      this.content = res
      this.contentLoaded = true
    })
    this.checkIfCollectArticle()
  },
  methods: {
    _handleStock():void {
      const stocks = document.querySelectorAll('a[href^="@min"]')

      for (let i = 0, length = stocks.length; i < length; i ++) {
        // 对于文章内的股票链接，跳转原生行情
        stocks[i].addEventListener('click', e => {
          e.preventDefault()

          eventTrack('007008')

          const stockCode = (stocks[i].getAttribute('href') || '').split('min=')[1]
          callStockAlive(stockCode, 'ordinary', localStorage.getItem('userCode') ? '1' : '0')
        })
      }
    },

    saveArticle(): void {
      if (!this.hasCollect) {
        // this.hasCollect = true
        if (hasLogin()) {
          saveArticle({
            id: this.browseInfo.refName,
            userId: getUserCode(),
            otime: this.content.otime,
            source: this.content.source,
            title: this.content.title,
            url: this.contentUrl
          }).then((resp: any) => {
            if (resp.success) {
              this.storeArticle()
              this.checkIfCollectArticle()
            } else {
              this.$toast('收藏失败')
            }
          })
        } else {
          callNativeLogin().then(resp => {
            localStorage.setItem('userCode', resp.data.user_code)
            this.checkIfCollectArticle()
          })
        }
      } else {
        // this.hasCollect = false
        deleteArticle(this.browseInfo.refName, getUserCode()).then(resp => {
          console.log('del', resp)
          if (resp.success) {
            this.cancelStore()
            this.checkIfCollectArticle()
          } else {

          }
        })
      }
    },

    storeArticle(): void {
      storeArticle(this.browseInfo.refName).then(resp => {
        this.$emit('save-success')
      })
    },

    cancelStore(): void {
      this.$toast('取消收藏')
      this.$emit('cancel-success')
    },

    checkIfCollectArticle(): void {
      if (!!localStorage.getItem('userCode')) {
        checkIfCollectArticle(this.browseInfo.refName, getUserCode()).then(res => {
          console.log('add',res)
          const CollectStatus:boolean = res.success && res.resultObj.isCollect == 'true'
          this.$emit('changeCollectStatus', CollectStatus)
        }).catch(err => {
          this.$toast(err)
        })
      }
    },

    shareArticle(): void {
      share('快来收听小君FM', this.content.title, this.contentUrl, 'title', 'http://dl.app.gtja.com/zixun/images/icon.png')

      shareArticle(this.browseInfo.refName)
    }
  },
  filters: {
    fromNow(ts: string): string {
      return fromNow(parseInt(ts))
    }
  },
  watch: {
    contentUrl (val) {
      console.warn(val)
      this.contentLoaded = false
      getArticleContent(val).then(res => {
        this.content = res
        this.contentLoaded = true

        this._handleStock()
      })
      this.checkIfCollectArticle()
    }
  },

})
</script>

<style lang="less" scoped>

.articleDetail {
  box-sizing: border-box;
}
.summary_wrap {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  margin-bottom: 21px;
  .summary {
    font-size: 18px;
    text-align: left;
    margin-bottom: 15px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .summary_info {
    display: flex;
    font-size: 12px;
    color: #aaa;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    .source {
      flex-basis: 45%;
    }
    .viewnum {
      flex-basis: 30%;
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .time {
      flex-basis: 25%;
      text-align: right;
    }
  }
}
.content {
  // line-height: 27px;
  // font-size: 16px;
  // text-align: left;
  min-height: 500px;
  padding-bottom: 60px;
  position: relative;
}
.footer {
  position: fixed;
  background-color: #fff;
  text-align: center;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -3px 15px -3px #ccc;
  font-size: 14px;
  min-height: 50px;
  box-sizing: border-box;
  padding: 5px 10px;
  .share, .collect {
    flex-basis: 50%;
    line-height: 35px;
    box-sizing: border-box;
    span {
      color: #555;
    }
    span:nth-of-type(2) {
      color: #9B9B9B;
    }
  }
  .share {
    border-right: 1px solid #ccc;
  }
}

.blue {
  color: #28a6fa;
}
.icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 15px;
}
.browse {
  margin-right: 5px;
}
</style>
